<template>
  <v-app id="inspire">
    <v-app-bar
        app
        color="white"
        flat
    >
      <v-container style="width: 100%" class="py-0 fill-height">
        <v-avatar
            class="mr-10 rounded-0"
            color="white"
            size="32"
            @click="$router.push('/')"
        >
          <img src="@/assets/logo.png">
        </v-avatar>
        <v-sheet>
          <v-tabs
              class="fill-height"
              centered
          >
            <v-tabs-slider color="transparent"></v-tabs-slider>

            <v-tab
                v-for="link in links"
                :key="link.path"
                :to="link.path"
            >
              <icon :name="link.icon"></icon>
              {{ link.name }}
            </v-tab>
          </v-tabs>
        </v-sheet>
        <v-spacer></v-spacer>
        <v-sheet class="mr-10 ml-10 text-h6">
          <v-badge
              color="pink"
              content="999"
              overlap
          >
            <icon name="notification--fill"></icon>
          </v-badge>
        </v-sheet>
        <v-responsive max-width="32">
          <v-menu
              transition="scale-transition"
              origin="top center"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-avatar
                  v-bind="attrs"
                  v-on="on"
                  color="orange darken-1"
                  size="32"
              ></v-avatar>

            </template>
            <v-list>
              <v-list-item @click>
                <v-list-item-title @click>
                  <icon name="user-location-line"></icon>
                  个人中心
                </v-list-item-title>
              </v-list-item>
              <v-list-item @click="logoutFn">
                <v-list-item-title>
                  <icon name="logout-box-line"></icon>
                  退出
                </v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-responsive>
      </v-container>
    </v-app-bar>
    <v-main class="grey lighten-3">
      <transition name="scroll-x-reverse-transition" mode="out-in" appear>
        <router-view></router-view>
      </transition>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'Layout',
  data: () => ({
    links: [
      {
        name: '控制台',
        path: '/dashboard',
        icon: 'dashboard-fill'
      }, {
        name: '系统管理',
        path: '/content',
        icon: 'file-settings-fill'
      }, {
        name: '网站设置',
        path: '/site-set',
        icon: 'settings--fill2'
      }, {
        name: '网站首页',
        path: '/',
        icon: 'home--fill2'
      }
    ]
  }),
  methods: {
    logoutFn() {
      this.$store.dispatch('logout')
    }
  }
}
</script>

<style scoped>

</style>
